<!-- 后台首页 -->
<template>
  <v-container>
    <v-row justify="space-around" dense>
      <v-col v-for="(item, index) in items" :key="item.category">
        <v-card>
          <v-card-text class="pa-0">
            <v-alert prominent icon="date_range" class="mb-0" border="left" :color="colors[index]" dark>
              <p >{{item.category}}</p>
              <p class="title font-weight-black" style="min-width:100px;">
                <count-to class="display-1" :startVal='0' :endVal='item.count' :duration='3000'></count-to>
              </p>
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <div id="container"></div>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import G2 from '@antv/g2'
import CountTo from 'vue-count-to'
import { fetchStatistics } from '@/api/admin/content.js'
// 颜色数组
const colors = ['red', 'green', 'blue', 'purple', 'teal', 'cyan', 'lime', 'amber', 'brown', 'grey', 'black']
// const icons = ['red', 'green', 'blue', 'purple', 'teal', 'cyan', 'lime', 'amber', 'brown', 'grey', 'black']
export default {
  name: 'DashBoard',
  components: { CountTo },
  data: function () {
    return {
      items: [],
      chart: null,
      colors: colors
    }
  },
  created: function () {
    this.fetchData()
  },
  computed: {},
  methods: {
    fetchData: function() {
      fetchStatistics().then(res => {
        this.items = res.data
        this.renderColumn()
      })
    },
    renderColumn: function() {
      // Step 1: 创建 Chart 对象
      this.chart = new G2.Chart({
        container: 'container', // 指定图表容器 ID
        // width: 300, // 指定图表宽度
        forceFit: true,
        height: window.innerHeight - 400 // 指定图表高度
        // padding: 20
      })
      // Step 2: 载入数据源
      this.chart.source(this.items)
      this.chart.interval().position('category*count').color('category')
      // Step 4: 渲染图表
      this.chart.render()
    }
  }
}
</script>
<style>
.text-over-one{
  height: 20px !important;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>
